<!--
 * @Description: 
 * @Date: 2023-11-20 20:07:30
 * @LastEditTime: 2023-12-17 21:39:05
-->
<template>
	<div class="squareGrid">
		<div class="squareGrid-item" v-for="(value, key) in props.type ? basicData : organizationData" :key="value">
			<span>{{ props.type ? basicString[key] : organizationString[key] }}</span>
			<div>
				<span>{{ value }}</span>
				<span>个</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import useInitHome from '@/store/home';
// 使用pinia仓库
let useStore = useInitHome();
enum organizationString {
	xzc = '行政镇',
	dzz = '党组织',
	djpp = '党建品牌',
	cjt = '村集体'
}
enum basicString {
	dyzs = '党员总数',
	ybdy = '村集体',
	zsdy = '正式党员',
	lddy = '流动党员'
}
import { getHomeData } from '../../service';
import { onMounted, reactive, watch } from 'vue';

const props = defineProps({
	type: {
		type: Number
	},
	topData: {
		type: Object
	}
});
let organizationData = reactive({
	xzc: 0,
	dzz: 0,
	djpp: 0,
	cjt: 0
});
let basicData = reactive({
	dyzs: 0,
	ybdy: 0,
	zsdy: 0,
	lddy: 0
});
watch(
	() => props.topData,
	(value, oldValue) => {
		if (props.type) {
			Object.assign(basicData, props.topData.dyjb);
		} else {
			Object.assign(organizationData, props.topData.zbzz);
		}
	},
	{ immediate: true, deep: true }
);
</script>

<style scoped lang="scss">
.squareGrid {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; //有几列
	grid-template-rows: repeat(2, 1fr); //有几行
	grid-gap: 10px;

	overflow: hidden;
	.squareGrid-item {
		background: rgba(255, 255, 255, 0.1);
		padding: 10px;
		span {
			color: #fff6d1;
		}
		& > span:nth-child(1) {
			display: inline-block;
			width: 100%;
			font-size: 16px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		div {
			width: 100%;

			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			span:nth-child(1) {
				font-size: 22px;
				margin-right: 5px;
			}
		}
	}
}
</style>
